<template>
	<div class="content">
		<div v-if="!userid" class="Genericpadding">
			<div class="sidebar_focus_bg"></div>
			<div class="sidebar_focus_box">
				<img src="./../assets/img/avatar.png" alt="" class="mawh" />
				<div class="shaoma Intervalvertical"
					><span>扫一扫关注</span>
					<p class="minfont grey">微信公众号</p>
				</div>
				<div class="Horizontalspacing interval center grey">
					<div class="GreyBox Horizontalspacing minxgap"> <div class="iconfont icon-qq"></div> <a href="http://" target="_blank" rel="noopener noreferrer">加入QQ群</a> </div>
					<div class="GreyBox Horizontalspacing minxgap"> <div class="iconfont icon-telegram"></div> <a href="http://" target="_blank" rel="noopener noreferrer">加入微信群</a> </div>
				</div>
			</div>
		</div>

		<el-card v-else shadow="never">
			<div v-if="info" class="author">
				<el-avatar class="Roundheadportraitbig center" :src="info.Avatar">
					<div class="image-slot iconfont icon-setting-role"></div>
				</el-avatar>
				<div class="center Horizontalspacing minaxgap"
					><span class="center blod">{{ info.username }}</span
					><div class="userqathumbs-up">{{ info.name }}</div></div
				>
				<div class="authortree minfont grey">
					<div class="center">帖子: {{ info.posts }}</div>
					<div class="center">问答: {{ info.qanum }}</div>
					<div class="center">粉丝: {{ info.fans }}</div>
				</div>
				<div class="gridrowtwo minaxgap">
					<router-link class="fans" :to="'/homepage/' + info.id"><el-button class="center" type="danger">个人主页</el-button></router-link>

					<el-button v-if="!fans" class="center" type="primary" @click="follow">
						关注<el-icon class="el-icon--right"><Plus /></el-icon>
					</el-button>
					<el-tag v-else class="fans" type="danger" @click="follow">已关注</el-tag>
				</div>

				<div class="abstract">{{ info.signature }}</div>
			</div>
		</el-card>
		<div class="Genericpadding Intervalvertical interval">
			<div class="articlebt">
				<div class="Horizontalspacing interval">
					<p class="Green bold">//</p>
					<div>{{ $t('message.Graphicsandtext') }}</div>
				</div>
				<div class="iconfont icon-24gf-ellipsis center grey"></div>
			</div>
			<!-- 图文文章内容 -->
			<ul class="ThinLineLayout interval minfont">
				<!-- 第一条样式不同 -->
				<li v-if="arclist[0]">
					<div class="TopRectangles">
						<el-image class="RightThumbnail" :src="arclist[0].thumbnail" lazy>
							<template #error>
								<div class="image-slots iconfont icon-jiazaitupian"></div>
							</template>
						</el-image>
						<div class="Toppositionings">
							<div class="Horizontalspacing minixgap">
								<span class="Green">[{{ arclist[0].pidname }}]</span><span class="pitruncate-text">{{ arclist[0].title }}</span>
							</div>
						</div>
					</div>
				</li>
				<!-- 骨架屏 -->

				<el-skeleton v-else animated>
					<template #template>
						<el-skeleton-item variant="image" style="width: 280px; height: 210px" />
						<div style="padding: 8px 10px">
							<el-skeleton-item variant="h3" style="width: 100%" />
						</div>
					</template>
				</el-skeleton>

				<!-- 后面的图文列表 -->
				<li v-if="arclist" v-for="(item, index) in arclist.slice(1, arclist.length)" :key="index"
					><router-link class="Horizontalspacing minaxgap" :to="'/article/' + item.alias + '/' + item.id" target="_blank" rel="noopener noreferrer">
						<div>
							<el-image class="ArticleMiniThumbnail" :src="item.thumbnail ? item.thumbnail : ''" lazy>
								<template #error>
									<div class="image-slot iconfont icon-jiazaitupian"></div>
								</template>
							</el-image>
						</div>
						<div class="CatalogLayout space-around">
							<div class="truncate-text">【{{ item.pidname }}】{{ item.title }}</div>
							<div class="articlebt grey">
								<span class="center">{{ item.Creationtime }}</span>
								<div class="Horizontalspacing minixgap"
									><span>{{ $t('message.View') }}</span
									><span>{{ item.PageView }}</span></div
								>
							</div>
						</div>
					</router-link>
				</li>
				<!--骨架屏 -->
				<div class="ThinLineLayout interval" v-else>
					<el-skeleton v-for="index in 3" :key="index" class="Horizontalspacing minaxgap" animated>
						<template #template>
							<div>
								<el-skeleton-item variant="image" style="width: 100px; height: 75px" />
							</div>
							<div class="CatalogLayout space-around">
								<el-skeleton-item variant="h3" class="truncate-text" />
								<el-skeleton-item variant="h3" class="truncate-text" />
								<div class="articlebt grey">
									<el-skeleton-item variant="h3" style="width: 100px" />
									<el-skeleton-item variant="h3" style="width: 50px" />
								</div>
							</div>
						</template>
					</el-skeleton>
				</div>
			</ul>
		</div>
		<div class="Genericpadding Intervalvertical">
			<a href="http://" target="_blank" rel="noopener noreferrer">
				<img class="picture" src="./../assets/img/2021031002485331.png" alt="" />
			</a>
		</div>
		<div class="Genericpadding Intervalvertical">
			<div class="articlebt">
				<div class="Horizontalspacing interval">
					<p class="Green bold">//</p>
					<div>{{ $t('message.Articlelist') }}</div>
				</div>
				<div class="iconfont icon-24gf-ellipsis center grey"></div>
			</div>
			<ul class="ArticleBackground ThinLineLayout minfont">
				<li v-if="arclist" v-for="(item, index) in list" :key="index">
					<router-link :to="'/article/' + item.alias + '/' + item.id" target="_blank">
						<div class="ArticleLayout Horizontalspacing minixgap">
							<span class="Green">[{{ item.pidname }}]</span>
							<span class="listtruncate-text">{{ item.title }}</span>
						</div>
					</router-link>
				</li>
				<div v-else>
					<el-skeleton v-for="index in 10" :key="index" class="ArticleLayout Horizontalspacing minixgap" animated>
						<template #template>
							<el-skeleton-item variant="h3" style="width: 100%" />
						</template>
					</el-skeleton>
				</div>
			</ul>
		</div>
		<div class="Genericpadding Intervalvertical interval">
			<div class="articlebt">
				<div class="Horizontalspacing interval">
					<p class="Green bold">//</p>
					<div>{{ $t('message.randomtags') }}</div>
				</div>
				<div class="iconfont icon-24gf-ellipsis center grey"></div>
			</div>
			<div class="Randomtags grey">
				<router-link v-for="(item, index) in tag.slice(0, 20)" :key="index" :to="'/search/article/' + item.name"
					><el-check-tag :checked="false">{{ item.name }}</el-check-tag></router-link
				>
			</div>
		</div>
	</div>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	import { mapState } from 'vuex'
	export default {
		name: 'HeaDer',
		computed: {
			...mapState(['logon', 'user']),
		},
		props: {
			userid: {
				default: null, // 默认值为0，如果没有传递userid，组件内部会使用0
			},
		},
		components: {
			// 组件
		},

		data() {
			return {
				// 參數
				arclist: '',
				list: '',
				info: '',
				fans: false,
				tag: [],
			}
		},
		methods: {
			//函數
			async getdata() {
				this.ifuser()
				// 正序 還是順序
				// 根據哪個表排序 這個好像 之需要
				let array = await api(['getarticlepage', { perPage: 4, page: 1, offset: 'DESC', tosort: 'popularity', thumbnail: 'hasValue' }])
				if (array.code == 200) {
					array = array.data
					this.arclist = array
					for (const key in this.arclist) {
						this.arclist[key].Creationtime = this.arclist[key].Creationtime.substr(0, 10)
					}
				}
				// 无图文章
				array = await api(['getarticlepage', { perPage: 10, page: 1, offset: 'DESC', tosort: 'popularity', thumbnail: 'noValue' }])
				if (array.code == 200) {
					array = array.data
					this.list = array
					for (const key in this.list) {
						this.list[key].Creationtime = this.list[key].Creationtime.substr(0, 10)
					}
				}
				// 获取标签
				array = await api(['articleTags', null], 'v2', 'query')
				if (array.code == 200) {
					console.log(array)
					this.tag = array.data
					// 随机取10个
				}
				// 登陆的时候判断

				if (this.userid) {
					this.iffollow()
				}
			},
			async ifuser() {
				if (this.userid) {
					// 获取用户信息
					let array = await api(['userinformation', this.userid])
					if (array.code == 200) {
						this.info = array.data
					}
				}
			},
			async iffollow() {
				console.log(this.userid)
				let array = await api(['followinterest', { toid: this.userid, fans: 1 }])

				if (array.code == 200) {
					this.fans = array.data
					return array.data
				}
			},
			//
			async follow() {
				// 提交关注和取消关注
				if (this.userid && this.user) {
					let array = await api(['followinterest', { toid: this.userid }])

					if (array.code == 200) {
						console.log('2')
						let arr = await this.iffollow()
						this.ifuser()
						if (arr) {
							// 已关注
							this.$message.success('已关注')
						} else {
							// 取消关注
							this.$message.error('取消关注')
						}
					} else if (array.code == 1001) {
						this.$message.error('不能关注自己')
					}

					// 这里看回调时关注成功还是取消关注
				} else {
					//
					this.$message.error('请先登录')
				}
			},
		},
		mounted() {
			this.getdata()
		},
		watch: {
			user(newValue, oldValue) {
				if (this.userid) {
					this.iffollow()
				}
			},
		},
	}
</script>
<style scoped>
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 75px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.image-slots {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 280px;
		height: 210px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.image-slot {
		font-size: 30px;
	}
	.truncate-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 设置最大显示行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		width: 170px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.pitruncate-text {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 170px; /* 设置容器宽度 */
	}
	.listtruncate-text {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 212px; /* 设置容器宽度 */
	}
	.el-card {
		border: 0px;
		border-radius: 0px;
	}
	.author {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.Roundheadportraitbig {
		width: 70px !important;
		height: 70px !important;
	}
	.authortree {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.author .el-button {
		width: 100%;
		border-radius: 4px;
	}
	.abstract {
		padding: 10px;
		border-radius: 4px;
	}
	.fans {
		width: 100%;
		height: 32px;
	}
</style>
